<template>
	<view class="collect-ball-welfare">
		<view class="welfare-table" v-if="list.length>0">
			<view class="table-item table-head">
				<view class="name">活动名称</view>
				<view class="time">集球时间</view>
				<view class="status">状态</view>
				<view class="operate">操作</view>
			</view>
			<view class="table-item" v-for="(item,index) in list" :key="index">
				<view class="name">{{item.activeName}}</view>
				<view class="time">{{item.collectionBallStartTime.split(' ')[0]}}~<br />{{item.collectionBallEndTime.split(' ')[0]}}</view>
				<view class="status">{{formatStatus(item.activeStatus)}}</view>
				<view class="operate">
					<text @tap="goPage(`/moduleB/manage/addAndEditCollectBallWelfare?id=${item.id}`)">设置</text>
					<text style="color: #d12920;" v-if="item.activeStatus==1" @tap="handleDelete(item.id)">删除</text>
					<text v-if="item.activeStatus==3||item.activeStatus==4" 
						@tap="goPage(`/moduleB/manage/awardWinnersList?activeName=${item.activeName}&benefitId=${item.id}`)">
						中奖名单
					</text>
				</view>
			</view>
		</view>
		<uni-load-more v-if="showLoadStatus" :status="status" :size="14" :content-text="contentText" />
		<view class="quesheng flexWarpCenterColumn" v-if="showEmpty">
			<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
			<view class="text">还没有福利活动哦，请先去添加吧~</view>
		</view>
		<view class="bottom-btn">
			<view class="btn" @tap="goPage('/moduleB/manage/addAndEditCollectBallWelfare')">新增</view>
		</view>
		
		<!--操作指引悬浮按钮 -->
		<guideline :path="'moduleB/manage/collectBallWelfare'"></guideline>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[],
				tableType:[
					{label:'麻将包房',value:0},
					{label:'中式黑八',value:1},
					{label:'美式九球',value:2},
					{label:'斯诺克',value:3},
					{label:'棋牌',value:4},
				],
				
				page: 1,
				size: 10,
				showEmpty: true,
				showLoadStatus: false,
				more: true,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中...',
					contentnomore: '已经到底了~~'
				},
				status: 'loading',
			}
		},
		onShow() {
			this.freshList()
		},
		
		onPullDownRefresh() {
			this.freshList()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		onReachBottom() {
			if (this.more) {
				this.getList()
			}
		},
		methods:{
			// 刷新列表
			freshList() {
				this.page = 1
				this.more = true
				this.status = 'loading'
				this.list = []
				setTimeout(()=>{
					this.getList();
				},200)
			},
			
			// 获取助教列表
			getList(){
				this.$request.post(this.$api.collectBallActiveList, {
					storeId:uni.getStorageSync('store_id'),
					pageNum:this.page++,  //当前页数
					pageSize:this.size,  //当前条数
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						let newArray = data.list
						if (newArray.length == 0 && this.page == 2) {
							this.showEmpty = true
							this.showLoadStatus = false
							this.more = false // 不能再次请求了
							return false;
						} else {
							this.showLoadStatus = true
							this.more = true
							this.showEmpty = false
							this.status = 'loading'
						}
						if (newArray.length < this.size) { // 说明没有更多数据
							this.status = 'noMore'
							this.more = false
							this.showEmpty = false
						}
						this.list = this.list.concat(newArray);
					}
				})
			},
			
			formatStatus(value){
				switch(value){
					case 1:
						return '待开始';  
					case 2:
						return '进行中';  
					case 3:
						return '已结束';  
					case 4:
						return '已开奖';  
					default:
						return ''
				}
			},
			
			// 删除
			handleDelete(id){
				uni.showModal({
					title: '确定删除活动？',
					confirmText:'确定删除',
					confirmColor:'#45B250',
					success: res=> {
						if (res.confirm) {
							this.$request.post(this.$api.collectBallActiveDelete, {
								id:id,
								userId:uni.getStorageSync('user_id'),
							},{
								isJava:true,
							}).then(res => {
								if(res.code==200){
									this.$tools.showToast('删除成功')
									this.freshList()
								}
							})
						} 
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.collect-ball-welfare{
		padding: 32rpx;
	}
	.welfare-table{
		background: #1D1C5C;
		overflow: hidden;
		margin-bottom: 50rpx;
		border-radius: 10rpx;
		padding: 30rpx;
		.table-item{
			display: flex;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			border-bottom:1rpx solid #36355E;
			&:first-child{
				border-top:1rpx solid  #36355E;
			}
			>view{
				padding: 16rpx 10rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.name{
				width: 160rpx;
				border-left:2rpx solid #36355E;
				border-right:2rpx solid #36355E;
			}
			.time{
				display: block;
				width: 185rpx;
				border-right:2rpx solid #36355E;
			}
			.status{
				width: 100rpx;
				border-right:2rpx solid #36355E;
			}
			.operate{
				flex: 1;
				flex-wrap: wrap;
				font-size: 24rpx;
				gap:16rpx;
				color: #26BCFD;
				border-right:2rpx solid #36355E;
			}
		}
		.table-head{
			>view{
				font-weight: bold;
				font-size: 28rpx !important;
				padding: 25rpx 10rpx;
			}
		}
	}
	
	.quesheng{
		image{
			width: 476upx;
			height: 280upx;
		}
		.text{
			color: #fff;
			font-size: 36rpx;
			margin: 50rpx 0 200rpx 0;
			text-align: center;
		}
	}
	
	.bottom-btn{
		margin-top: 20rpx;
		width: 100%;
		position: sticky;
		bottom: 50rpx;
		left: 0;
		.btn{
			width: 670rpx;
			height: 80rpx;
			margin: 0 auto;
			background: rgb(31, 124, 247);
			border-radius: 72rpx;
			font-size: 34rpx;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>